<template>
    <div class="full">
        <div class="left" v-if="!isShow">
            <div class="text">
                <p>{{config.systemName}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div>
                <iframe id="template-iframe" ref="iframe" :src="iframeSrc" width="1038" height="750" style="width:100%"></iframe>
            </div>
            <div class="info">
                <div class="info-left">
                    台账信息
                </div>
                <div class="info-right">
                    <div>
                        <div>厂家：{{parameterInfo.manufacturerName}}</div>
                        <div>冷却方式：{{parameterInfo.way}}</div>
                    </div>
                    <div>
                        <div>型号：{{parameterInfo.model}}</div>
                        <div>投运时间：{{parameterInfo.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right" v-if="!isShow">
            <div class="tabs">
                <p>参数监测</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div class="parameter">
                <div class="top_border"></div>
                <div class="list">
                    <div v-for="(item,index) in parameter" :key="index" class="item">
                        <p>{{item.label}}</p>
                        <!-- 超低 -->
                        <span v-if ="item.num === 'NaN' || item.num === undefined || item.num === ''" style="font-weight:bold">--</span>
                        <span v-else-if="item.num <= item.b" style="font-weight:bold" class="orange types-orange">异常</span>
                        <span v-else-if="item.num <= item.c" style="font-weight:bold" class="green types-green">正常</span>
                        <span v-else-if="item.num <= item.d" style="font-weight:bold" class="cyan types-cyan">异常</span>
                        <span v-else-if="item.num > item.d" style="font-weight:bold" class="red types-red">异常</span>
                        <!-- <span v-else style="font-weight:bold" class="">--</span> -->
                    </div>
                </div>
                <div class="bottom_border"></div>
            </div>
            <div class="tabs">
                <p>报警信息（{{totle1}}）条/未确认（{{unconfirm}}）条</p>
                <img src="../assets/img/mg427.png" alt="">
                 <el-button class="history" type="primary" size="mini" @click="showTip(1)">历史报警</el-button>
            </div>
            <div class="infos">
                <div class="top_border"></div>
                <div class="item btnTitle" style="font-weight:bold">
                    <p style="width:30%;text-align:center">触发时间</p>
                    <p style="width:45%;text-align:center">报警内容</p>
                    <p style="width:13%;text-align:center">状态</p>
                    <p style="width:11%;text-align:center">操作</p>
                </div>
                <div class="list top" style="overflow-y: auto;padding-top:40px">
                    <div v-for="(item,index) in monitorList1" :key="index" class="item">
                        <p style="width:30%;text-align:center">{{getTimes(item.create_date)}}</p>
                        <p style="width:45%;text-align:center;word-wrap:break-word;">{{item.title}}</p>
                        <p style="width:13%;text-align:center">{{item.confirm ? '已确认' : '未确认'}}</p>
                    <!-- <div v-for="(item,index) in 6" :key="index" class="item">
                        <p style="width:30%;text-align:center">2020-12-12 12:12:12</p>
                        <p style="width:45%;text-align:center;word-wrap:break-word;">已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认已确认</p>
                        <p style="width:13%;text-align:center">{{item.confirm ? '已确认' : '未确认'}}</p> -->
                        <p style="width:11%;text-align:center"><el-button type="primary" size="mini" @click="callPolice(item)">确认报警</el-button></p>
                    </div>
                </div>
                <div class="bottom_border"></div>
            </div>
            <div class="tabs">
                <p>状态信息 ({{totle2}}) 条</p>
                <img src="../assets/img/mg427.png" alt="">
                 <el-button class="history" type="primary" size="mini" @click="showTip(2)">历史状态</el-button>
            </div>
            <div class="infos">
                <div class="top_border"></div>
                <div class="item btnTitle" style="font-weight:bold">
                        <p style="width:30%;text-align:center">触发时间</p>
                        <p style="width:70%;text-align:center">状态内容</p>
                        <!-- <p>操作</p> -->
                    </div>
                <div class="list top" style="overflow-y: auto;padding-top:40px">
                    <div v-for="(item,index) in monitorList2" :key="index" class="item">
                        <p style="width:30%;text-align:center">{{getTimes(item.create_date)}}</p>
                        <p style="width:70%;text-align:center">{{item.title}}</p>
                    <!-- <div v-for="(item,index) in 6" :key="index" class="item">
                        <p style="width:30%;text-align:center">2020-12-12 12:12:12</p>
                        <p style="width:70%;text-align:center">已确认已确认已确认已确认已确认已确认已确认已确认已确认已</p> -->
                        <!-- <p><el-button type="primary" size="mini" @click="callPolice(item)">确认报警</el-button></p> -->
                    </div>
                </div>
                <div class="bottom_border"></div>
            </div>
        </div>

        <div class="history-data" v-if="isShow">
            <i class="el-icon-circle-close" @click="closeTip"></i>
            <div class="bg">
                <div class="tabs">
                    <p>{{type === 1 ? '告警信息' : '状态信息'}}</p>
                    <img src="../assets/img/mg427.png" alt="">
                </div>
                <div class="searchHeader">
                    <div class="header-left">
                        <el-button type="primary" @click="getSubmin(1)">刷新</el-button>
                         <el-button type="primary" @click="alarmRemoveData" v-if="type === 1">删除</el-button>
                    </div>
                    <div class="header-right">
                        <el-input placeholder="请输入内容" v-model="searchInput">
                            <el-button slot="append" icon="el-icon-search" @click="getSubmin"></el-button>
                        </el-input>
                    </div>
                </div>
                <div class="infos">
                    <div class="top_border"></div>
                    <el-table ref="multipleTable" :data="historyList" tooltip-effect="dark" style="width: 100%" height="675" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" v-if="type === 1"></el-table-column>
                        <el-table-column label="触发时间" width="165">
                            <template slot-scope="scope">{{ getTimes(scope.row.create_date) }}</template>
                        </el-table-column>
                        <el-table-column prop="title" :label="type === 1 ? '报警内容' : '状态内容'"></el-table-column>
                        <el-table-column prop="confirm"  label="确认状态" sortable width="200" v-if="type === 1">
                            <template slot-scope="scope">{{ scope.row.confirm ? '已确认' : '未确认' }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="140" v-if="type === 1">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.type === 'warning' && type === 1" type="primary" size="mini" @click="callPolice(scope.row)">确认报警</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="bottom_border"></div>
                </div>
                <el-pagination
                    small
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageSize"
                    :page-size="currentPage"
                    layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getAlarmList, alarmConfirm, alarmRemove, getAlarmCount } from "../assets/api/api"
export default {
    data(){
        return {
            type:1,
            tipType:1,
            isShow:false,
            monitorList1:[],
            monitorList2:[],
            historyList:[],
            form: {
                date: [new Date().getTime() - 3600, new Date().getTime()]
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pageSize:1,
            currentPage:0,
            total:0,
            searchInput:'',
            multipleSelection:[],
            totle1:0,
            totle2:0,
            unconfirm:0,
        }
    },
    computed:{
        parameter(){
            var lists = []
            const realTimeData = this.$store.state.realTimeData
            if(realTimeData.length > 0){
                lists = realTimeData[realTimeData.length - 1]
            }
            if(lists.length === 0){
                return [
                    {
                        label:'进阀温度',
                        num: '',
                        a:0, // 超级
                        b:10, // 低
                        c:47, // 高
                        d:50 // 超高
                    },{
                        label:'出阀温度',
                        num: '',
                        a:0,
                        b:0,
                        c:61,
                        d:64
                    },{
                        label:'出阀压力',
                        num: '',
                        a:0.1,
                        b:0.12,
                        c:0.35,
                        d:0.35
                    },{
                        label:'进阀压力',
                        num: '',
                        a:0.53,
                        b:0.56,
                        c:0.97,
                        d:1.0
                    },{
                        label:'冷却水流量',
                        num: '',
                        a:119,
                        b:126.9,
                        c:139.1,
                        d:139.1
                    },{
                        label:'膨胀罐液位',
                        num: '',
                        a:10,
                        b:30,
                        c:85,
                        d:85
                    },
                ]
            }else{
                return [
                    {
                        label:'进阀温度',
                        num: lists.T_In_Valve.real,
                        a:0, // 超级
                        b:10, // 低
                        c:47, // 高
                        d:50 // 超高
                    },{
                        label:'出阀温度',
                        num: lists.T_Out_Valve.real,
                        a:0,
                        b:0,
                        c:61,
                        d:64
                    },{
                        label:'冷却水流量',
                        num: lists.F_Of_CW.real,
                        a:119,
                        b:126.9,
                        c:139.1,
                        d:139.1
                    },{
                        label:'进阀压力',
                        num: lists.P_In_Valve.real,
                        a:0.53,
                        b:0.56,
                        c:0.97,
                        d:1.0
                    },{
                        label:'出阀压力',
                        num: lists.P_Out_Valve.real,
                        a:0.1,
                        b:0.12,
                        c:0.35,
                        d:0.35
                    },{
                        label:'膨胀罐液位',
                        num: lists.L_In_Tank.real,
                        a:10,
                        b:30,
                        c:85,
                        d:85
                    },
                ]
            }

            
        },
        iframeSrc(){
            // const modelUrl = window.location.protocol +window.location.host + '/'
            return `${this.config.modelUrl}NC/s3/?access_token=${this.config.token}`
        },
        parameterInfo(){
            return this.config ? this.config.parameterInfo : {}
        },
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        }
    },
    mounted(){
        this.dataList(1)
        this.dataList(2)
        this.getAlarmCount()
    },
    methods: {
        // 获取数量
        getAlarmCount(){
            const params = {
                token:this.config.token
            }
            getAlarmCount(params, (res) => {
                if(res.code === 200){
                    const newData = res.data.alarmCount.filter(item => item.name === this.config.systemName)[0]
                    this.unconfirm = newData.unconfirm || 0
                }
            })
        },
        alarmRemoveData(){
            if(this.multipleSelection.length === 0){
                this.$message({
                    message: '请勾选最少一条信息',
                    type: 'warning'
                })
                return
            }
            let ids = ''
            for(const item of this.multipleSelection){
                ids += `${item.id},`
            }

            const params = {
                ids:ids,
                token:this.config.token
            }
            alarmRemove(params, (res) => {
                if(res.code === 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.onSubmit(this.type)
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getTimes(time){
            let b = time.split('.')
            return b[0]
        },
        callPolice(item){
            if(item.confirm){
                return
            }
            const params = {
                id:item.id,
                token:this.config.token
            }
            alarmConfirm(params, (res) => {
                if(res.code === 200){
                    this.$message({
                        message: '报警成功',
                        type: 'success'
                    })
                    this.dataList(1)
                    this.onSubmit(1)
                }
            })
        },
        closeTip(){
            this.isShow = false
            this.pageSize = 1
        },
        showTip(type){
            this.historyList = []
            this.total = 0
            this.currentPage = 1

            this.tipType = type
            this.type = type
            this.onSubmit(type)
            this.isShow = true
        },
        onSubmit(type){
            const params = {
                type: type===1 ? 'warning' : 'inform',
                page:this.pageSize,
                token:this.config.token,
                keyword:this.searchInput
            }
            getAlarmList(params,(res) => {
                if(res.code === 200){
                    this.historyList = res.data.alarmList
                    this.total = res.data.total
                    this.currentPage = res.data.count
                }
            })
        },
        dataList(type){
            const params = {
                type: type===1 ? 'warning' : 'inform',
                token:this.config.token,
                sort:'asc'
            }
            getAlarmList(params,(res) => {
                if(res.code === 200){
                    if(type === 1){
                        this.monitorList1 = res.data.alarmList.filter(item => item.system === this.config.systemName)
                        if(this.monitorList1.length > 6){
                            this.monitorList1.length = 6
                        }
                        this.totle1 = res.data.total
                    }else if(type === 2){
                        this.monitorList2 = res.data.alarmList.filter(item => item.system === this.config.systemName)
                        if(this.monitorList2.length > 6){
                            this.monitorList2.length = 6
                        }
                        this.totle2 = res.data.total
                    }
                    
                    
                    
                }
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.onSubmit(this.type)
        },
        handleCurrentChange(val) {
            this.pageSize = val
            this.onSubmit(this.type)
        },
        getSubmin(type){
            if(type === 1){
                this.pageSize = 1
                this.searchInput = ''
            }
            
            this.onSubmit(this.type)
        }
    }
}
</script>
<style lang="less">
.full{
    .el-pagination{
        margin:20px 0;
    }
    .el-pagination button:disabled,
    .el-pagination__jump,
    .el-pagination--small .btn-next, .el-pagination--small .btn-prev, .el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext, .el-pagination--small .el-pager li.btn-quickprev, .el-pagination--small .el-pager li:last-child{
        background: none;
        color: #FFFFFF;
    }
    .el-pager li.active{
        color: #409EFF;
        cursor: default;
    }
    .el-button--primary.history{
        background: #1C2755 !important;
    }
}
.el-table--scrollable-y .el-table__body-wrapper{
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #5273E0;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #164C7E;
    }
}
</style>

<style lang="less" scoped>
.small{
    .full{
        .left{
            display: none;
        }
        .right{
            width: 100%;
            .list.top{
                height: 113px;
            }
        }
    }
    .history{
        right: 24px !important;
    }
    .searchHeader{
        display: none !important;
    }
    .unconfirm{
        right: 110px !important;
    }
}
.btnTitleHeader{
    min-height: 40px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 30px;
    right: 40px;
    color: #FFFFFF;
    background: #072241 !important;
}
.btnTitle{
    min-height: 40px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    color: #FFFFFF;
    background: #072241 !important;
}
.list.top{
    padding-top: 40px;
    
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #5273E0;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #164C7E;
    }
}
.full{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .left{
        width: 60%;
        height: 100%;
        border-right: 10px solid #0d1830;
        text-align: center;
        padding-left: 10px;
        display: block;
        .text{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .info{
            margin-top: 20px;
            background: rgba(22, 76, 126, 0.2);
            border-radius: 4px;
            display: flex;
            padding: 10px;
            .info-left{
                width: 40px;
                writing-mode: tb;
                background: #0d1830;
                color: #FFFFFF;
                text-align: center;
                padding-right: 20px;
                -webkit-box-shadow:0px 5px 12px rgba(141, 207, 248, 0.5) inset;
                -moz-box-shadow:0px 5px 12px rgba(141, 207, 248, 0.5) inset;
                box-shadow:0px 5px 12px rgba(141, 207, 248, 0.5) inset;
                margin-right: 20px;
            }
            .info-right{
                display: flex;
                flex: 1;
                &>div{
                    flex: 1;
                    &>div{
                        text-align: left;
                        line-height: 40px;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
    .right{
        width: 40%;
        height: 100%;
        padding-right: 10px;
        .tabs{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            margin-bottom: 10px;
            position: relative;
            .unconfirm{
                position: absolute;
                bottom: 0px;
                right: 100px;
                font-size: 12px;
                color: red;
            }
            .history{
                position: absolute;
                top: -3px;
                right: 14px;
            }
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .parameter,.infos{
            margin-bottom: 10px;
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                margin: 0px 10px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                height: 290px;
                overflow: hidden;
                .item{
                    min-height: 40px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    // padding: 0 10px;
                    color: #FFFFFF;
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                }
            }
        }
        .parameter{
            .list{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                height: 140px;
                .item{
                    width: 50%;
                    min-width: 50%;
                    padding: 0;
                    background: rgba(22, 76, 126, 0.1);
                    height: 42px;
                    &:nth-child(odd){
                        p{
                            margin-left: 10px;
                        }
                        span{
                            margin-right: 50px;
                        }
                    }
                    &:nth-child(even){
                        p{
                            margin-left: 50px;
                        }
                        span{
                            margin-right: 40px;
                        }
                    }
                    span{
                        position: relative;
                        &.red{
                            color: #D32029;
                        }
                        &.green{
                            color: #49AA19;
                        }
                        &.cyan{
                            color: #D87A16;
                        }
                        &.orange{
                            color: #E8D639;
                        }
                        &.types-red{
                            &:after{
                                position: absolute;
                                content: '';
                                top: 50%;
                                right: -15px;
                                width: 10px;
                                height: 10px;
                                border-radius: 50px;
                                background: #D32029;
                                margin-top: -4px;
                            }
                        }
                        &.types-green{
                            &:after{
                                position: absolute;
                                content: '';
                                top: 50%;
                                right: -15px;
                                width: 10px;
                                height: 10px;
                                border-radius: 50px;
                                background: #49AA19;
                                margin-top: -4px;
                            }
                        }
                        &.types-cyan{
                            &:after{
                                position: absolute;
                                content: '';
                                top: 50%;
                                right: -15px;
                                width: 10px;
                                height: 10px;
                                border-radius: 50px;
                                background: #D87A16;
                                margin-top: -4px;
                            }
                        }
                        &.types-orange{
                            &:after{
                                position: absolute;
                                content: '';
                                top: 50%;
                                right: -15px;
                                width: 10px;
                                height: 10px;
                                border-radius: 50px;
                                background: #E8D639;
                                margin-top: -4px;
                            }
                        }
                    }
                }
            }
        }
        .infos{
            .item{
                p{
                    width: 50%;
                    text-align: left;
                }
            }
        }
    }
    .history-data{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #0d1830;
        z-index: 100;
        .el-icon-circle-close{
            position: absolute;
            top: 20px;
            right: 40px;
            font-size: 30px;
            color: #ffffff;
        }
        .bg{
            width: 95%;
            height: 75%;
            margin: 50px auto;
        }
        .tabs{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            margin-bottom: 10px;
            position: relative;
            .history{
                position: absolute;
                top: -3px;
                right: 14px;
            }
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .search{
            padding-left: 20px;
            margin: 20px 0;
            .el-col-20{
                width: 420px;
            }
        }
        .infos{
            margin-bottom: 10px;
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            height: 100%;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                margin: 0px 10px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                height: 73%;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background   : #5273E0;
                }
                &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background   : #164C7E;
                }
                .item{
                    // height: 30px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    color: #FFFFFF;
                    flex: 1;
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                }
            }
        }
    }
    .searchHeader{
        display: flex;
        justify-content: space-between;
        margin: 0 0 10px 0
    }
}
</style>
